<style type="text/css">
#MatterAllClassifiers{
  width: 941px;
}
#classifiers-list-head{
  cursor: pointer;
}
.classifier-col-value{
  display:inline-block;
  width: 220px;
  vertical-align: top;
}
.classifier-col-url{
  display:inline-block;
  width: 350px;
  vertical-align: top; 
}
.classifier-col-lnkto{
  display:inline-block;
  width: 160px;
  vertical-align: top;
}
.classifier-actions{
  display: none;
}
.classifier-head span{
  height: 18px;
  vertical-align: top;
}
.classifier-head:hover .classifier-actions{
  display: inline-block;
}

.delete-classifier{
  display: none;
  cursor: pointer;
}
.classifier-row:hover .delete-classifier{
  display: inline-block;
}
.add-classifier-totype{
  cursor: pointer;
}
.sortable-classifiers {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
}
.sortable-classifiers li{
  float:left;
  width: 900px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var fvalue = '';
var dvalue = '';
    $("#classifiers-list-head").click(function(event){
        $('#classifier-popup').css('display','none');
        location.reload();
    });

        $('.sortable-classifiers').sortable({
            update : function(event, ui){
              var order = $(this).sortable('serialize');
              var liIds = $(this).find('li').map(function(i,n){
                  return $(n).attr('id');
              }).get().join(',');

              $.ajax({
                type: 'POST',
                url : '/matter/save-classifier-display/',
                data: { order_list : liIds },
                success : function(data){
                  reorder_actors = 1;
                }
              });
            }
        });
        $('#sortable-role-actors').disableSelection();

    $.editable.addInputType('autocomplete', {
                element : $.editable.types.text.element,
                plugin : function(settings, original){
                  $('input', this).autocomplete(settings.autocomplete);
          }
    });
    $.editable.addInputType('tautocomplete', {
                element : $.editable.types.textarea.element,
                plugin : function(settings, original){
                  $('input', this).autocomplete(settings.autocomplete);
          }
    });

    $('.value-neditable').editable('/matter/update-classifier', {
      type: 'textarea',
      submit: 'Ok',
      cancel: 'Cancel',
      placeholder: '...',
      select : true,
      indicator : '<span class="icon-busy" />',
      tooltip: 'Click to edit....',
      submitdata: function(value, settings){
        var cid = $(this).parent().attr('id');
        return { classifier_id: cid, field: 'value'}
      }
    });

var type_id = ''
var nterm = '';
    $('.value-editable').mouseenter(function(){
      type_id = $(this).attr('id');
      nterm = '';
    });

    $('.value-editable').editable('/matter/update-classifier', {
      placeholder: '...',
      select: true,
      type: 'tautocomplete',
      submit: 'Ok',
      cancel: 'Cancel',
      onblur: 'submit',
      autocomplete: {
        minLength : 0,
        source : function(request, response){
          nterm = request.term;
          $.ajax({
            url: "/matter/get-classifier-values",
            dataType: 'json',
            data: { 
                    type_code: type_id,
                    term: request.term
                  },
            success: function(data){
              response(data);
            }
          });
        },
        select: function( event, ui ){
          $(this).val(ui.item.value);
          fvalue = ui.item.id;
          dvalue = ui.item.value;
          var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              fvalue = "";
              return false;
            }
          return true;
        }
      },
      submitdata: function(value, settings){
        var cid = $(this).parent().attr('id');
        return { classifier_id: cid, field: 'value_id', fvalue: fvalue, dvalue: dvalue, type_code: type_id }
      }
    });

    $('.url-editable').editable('/matter/update-classifier', {
      placeholder: '...',
      select : true,
      indicator : '<span class="icon-busy" />',
      tooltip: 'Click to edit....',
      submitdata: function(value, settings){
        var cid = $(this).parent().attr('id');
        return { classifier_id: cid, field: 'url' }
      }
    });

    $('.lnk-editable').editable('/matter/update-classifier', {
      type: 'autocomplete',
      placeholder: '...',
      onblur: 'submit',
      select: true,
      autocomplete: {
        minLength : 0,
        source : "/matter/get-container-caserefs",
        select: function( event, ui ){
          $(this).val(ui.item.value);
          fvalue = ui.item.id;
          dvalue = ui.item.value;
          var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val("");
              fvalue = "";
              dvalue = "";
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
        }
      },
      submitdata: function(value, settings){
        var cid = $(this).parent().attr('id');
        return { classifier_id: cid, field: 'lnk_matter_ID', value: fvalue, dvalue: dvalue }
      }
    });

    $('.delete-classifier').click(function(){
      var cid = $(this).parent().attr('id');
      var del_confirm = confirm("Do you want to delete classifier?");
      if(del_confirm){
        $.ajax({
            url: '/matter/delete-classifier',
            type: 'post',
            data: { classifier_id: cid },
            success: function(data){
              if(!isNaN(parseInt(data))){
                $.ajax({
                type: "POST",
                url: "/matter/classifierlist/id/"+$('#this-matter-id').val(),
                data: {},
                success: function(data){
                  $('#classifier-popup').empty();
                  $('#classifier-popup').html(data);
                }
               });
              }else{
                alert(data);
              }
            }
         });
       }
    });

    $('.delete-classifier-type').click(function(){
      var type_code = $(this).attr('id');
      var del_confirm = confirm("Do you want to delete all classifiers of type "+ type_code +" ?");
      if(del_confirm){
        $.ajax({
            url: '/matter/delete-classifiers',
            type: 'post',
            data: { type_code: type_code },
            success: function(data){
                $.ajax({
                type: "POST",
                url: "/matter/classifierlist/id/"+$('#this-matter-id').val(),
                data: {},
                success: function(data){
                  $('#classifier-popup').empty();
                  $('#classifier-popup').html(data);
                }
               });
            }
         });
       }
    });

    $('.add-classifier-totype').click(function(){
      var type_code = $(this).attr('id');
      $('#facade').css('height', $(document).height());
      $('#facade').css("display", "block");
      $.ajax({
          type: "GET",
          url: "/matter/add-classifier/type_code/"+type_code,
          data: {},
          success: function(data){
            
            if(isNaN(parseInt(data))){
              $('#add-classifier-popup').html(data);
              var ren_left = Math.round($(window).width()/2) - Math.round($('#add-classifier-popup').width()/2);
              $('#add-classifier-popup').css('left', ren_left);
              $('#add-classifier-popup').css('display', 'block');
            }else{
              alert(data);
            }
          }
      });
      return false;
    });

    $('.sortable-classifiers').each(function(){
        var lsize = $(this).children('li').length
        if(lsize < 2){
          $(this).find('span.sort-icon').hide();
        }
    });
    $( "button, input:button").button();
});
</script>

<div id="MatterAllClassifiers" class="listrow" ><div id="classifiers-list-head" class="status-row" style="padding-bottom:4px;">
<span class="classifier-col-value" style="margin-left: 5px;">All classifiers</span>
<span class="classifier-col-url" style="margin-left: 10px;">URL</span>
<span class="classifier-col-lnkto" style="margin-left: 10px;">Link to matter</span>
<button class="add-classifier-totype" style="float:right;margin: 0px 5px 3px 0px;vertical-align:top;">Add classifier</button>
</div>

<div class="list-matter-block-info" style="max-height: 350px; min-height: 100px; width:99%; height: auto;" >
<?php 
$type = '';
$close_type = 0;
$add_empty_row = 0;

foreach($this->classifiers as $classifier){
  if($type != $classifier['type']){
    $type = $classifier['type'];
    
    if($close_type)
      echo "</div></ul></div>";
?>
<? if($add_empty_row){ ?>
<div style="height:15px;float:left;width:900px;"></div>
<? } ?>
<div id="classifier-type-<?=$classifier['type_code']?>" style="float:left;">
<div class="status-row classifier-head" style="margin:5px 0px; border-bottom: 1px solid #DDD;">
<span class="classifier-col-value"><b><?=$classifier['type']?></b></span>
<div class="classifier-actions"><span class="add-classifier-totype" id="<?=$classifier['type_code']?>" title="Add classifier to type"><span class="ui-icon ui-icon-plusthick" title="Add classifier" style="float: left;"></span></span>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="delete-classifier-type" style="cursor:pointer;" id="<?=$classifier['type_code']?>"><span class="ui-icon ui-icon-trash" title="Delete classifier type" style="float: right;"></span></span></div>
</div>
<div style="display:block;"><ul class="sortable-classifiers" >
<?php $close_type=1; }
    if($type == $classifier['type']){
      if($classifier['value_ID'] === NULL)
         $vclass = "value-neditable";
      else
         $vclass = "value-editable";
?>
<li id="<?=$classifier['ID']?>">
<span class="ui-icon ui-icon-arrowthick-2-n-s sort-icon" style="float:left; cursor: move;" ></span>
<div class="status-row classifier-row" id="<?=$classifier['ID']?>" typc="<?=$classifier['type_code']?>">
  <span class="classifier-col-value <?=$vclass?>" id="<?=$classifier['type_code']?>" ><?=$classifier['value']?></span>
<span class="classifier-col-url url-editable" style="overflow: hidden; white-space: nowrap; margin-left: 10px;"><?=$classifier['url']?></span>
  <span class="classifier-col-lnkto lnk-editable" style="margin-left: 10px;"><?=$classifier['lnkTo']?></span>
  <span class="delete-classifier"><span class="ui-icon ui-icon-trash" title="Delete classifier" style="float: right;"></span></span>
</div></li>
<?php } 
   $add_empty_row = 1;
 }
    if($close_type)
      echo "</div></ul></div>";
 ?>
</div>

</div>
